import React, { Component } from 'react'
// Comp是组件,所以未来要实例化,所以定义的时候为了方便,首字母一般会大写
export default function (Comp) {
  return class Far extends Component {
    // react调试工具,展示组件名的时候,优先展示组件静态属性displayName的值,如果没有则展示静态属性name的值.默认所有的组件都没有displayName静态属性,所以一般我们在调试工具中看到的都是name属性的值. 如果想在调试工具中展示别的名字,一般会给组件添加静态属性displayName
    static displayName = 'With' + Comp.name // Comp是子组件,.name则返回这个子组件静态属性name的值
    state = {
      username: '',
      password: '',
      repassword: '',
    }
    handle = (name) => (e) => {
      this.setState({
        [name]: e.target.value.trim(),
      })
    }
    render() {
      //  Comp就是Login或Registe组件
      //      注意: 如果以后要定义高阶组件,一定要记得把{...this.props}这段代码写上,是为了让使用者可以顺利的传递数据
      return <Comp {...this.state} handle={this.handle} {...this.props}></Comp>
    }
  }
}
